<template>
  <el-dialog
    :title="title"
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="cancelDialog"
    width="550px"
  >
    <el-form
      ref="forms"
      :model="qo"
      label-width="100px"
      size="mini"
      style="padding: 0 30px"
      :rules="qo_Rules"
    >
      <el-form-item label="级段位名称" prop="name">
        <el-input v-model.trim="qo.name" placeholder="请输入级段位名称" maxlength="15" size="mini" type="text" />
      </el-form-item>
      <el-form-item label="类型" prop="levelDuanTypeCode">
        <el-select v-model="qo.levelDuanTypeCode" size="mini" placeholder="请选择类型" filterable style="width: 100%;" @change="changeType">
          <el-option v-for="item in dict.levelDuanType" :key="item.code" :value="item.code" :label="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="qo.levelDuanTypeCode === 'Level'" label="具体级别" prop="beltLevelTypeCode" :rules="qo_Rules.beltLevelTypeCode">
        <el-select v-model="qo.beltLevelTypeCode" size="mini" placeholder="请选择级位" filterable style="width: 100%;">
          <el-option v-for="item in dict.beltLevelType" :key="item.code" :value="item.code" :label="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-else label="具体级别" prop="beltDuanTypeCode" :rules="qo_Rules.beltDuanTypeCode">
        <el-select v-if="qo.levelDuanTypeCode === null" v-model="qo.beltDuanTypeCode" size="mini" placeholder="请选择" filterable style="width: 100%;" />
        <el-select v-else v-model="qo.beltDuanTypeCode" size="mini" placeholder="请选择段位" filterable style="width: 100%;">
          <el-option v-for="item in dict.beltDuanType" :key="item.code" :value="item.code" :label="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="报名费用" prop="fee">
        <el-input v-model.trim="qo.fee" placeholder="请输入报名费用" type="number" :min="0" oninput="if(value > 21474836) value = 21474836">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="状态" prop="isEnabled">
        <el-radio-group v-model="qo.isEnabled">
          <el-radio :label="true">启用</el-radio>
          <el-radio :label="false">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="cancelDialog()">{{ $t('button.cancel') }}</el-button>
      <el-button size="mini" type="primary" :loading="btnLoading" @click="confirm()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { CopyData } from '@/lib';
import { mapState, mapActions } from 'vuex';
import validator from '@/lib/validate/index.js';
import {
  api_POST_ClubDuan, // 新建级段位
  api_PUT_ClubDuanId // 更新级段位
} from '@/extend/api/hallswaggerApi/app';
export default {
  data() {
    return {
      title: '',
      type: '',
      btnLoading: false,
      dialogVisible: false,
      qo: {
        name: '',
        fee: 0,
        isEnabled: true,
        levelDuanTypeCode: null,
        beltLevelTypeCode: null,
        beltDuanTypeCode: null
      },
      qo_use: {
        name: '',
        fee: 0,
        isEnabled: true,
        levelDuanTypeCode: null,
        beltLevelTypeCode: null,
        beltDuanTypeCode: null
      },
      qo_Rules: {
        name: [validator.required('级段位名称不能为空', 'blur')],
        levelDuanTypeCode: [validator.required('级段位类型不能为空', 'change')],
        beltDuanTypeCode: [validator.required('具体级别不能为空', 'change')],
        beltLevelTypeCode: [validator.required('具体级别不能为空', 'change')],
        fee: [
          { required: true, message: '报名费用不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkPrice(value, '请输入正确报名费用'));
            },
            trigger: 'blur'
          }]
      },
      id: ''
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  watch: {
    type: {
      handler(val) {
        if (val) {
          this.title = (val === 'add' ? '新增' : '编辑') + '级段位';
        }
      }
    }
  },
  created() {
    // if (this.qo) {
    //   this.qo.isEnabled = true;
    // }
    this.getDict();
  },
  methods: {
    ...mapActions({ getDictByType: 'dict/getDictByType', getDict: 'dict/getDict' }),
    confirm() {
      this.$refs.forms.validate(valid => {
        if (valid) {
          CopyData(this.qo, this.qo_use);
          if (this.type === 'add') {
            this.add();
          }
          if (this.type === 'edit') {
            this.edit();
          }
        }
      });
    },
    changeType(e) {
      this.qo.beltLevelTypeCode = null;
      this.qo.beltDuanTypeCode = null;
    },
    // 新增级段位
    add() {
      this.btnLoading = true;
      this.qo_use.fee = Math.round((this.qo_use.fee * 100) * 1000) / 1000;
      api_POST_ClubDuan(this.qo_use).then(res => {
        this.$message({ type: 'success', message: '创建成功' });
        this.btnLoading = false;
        this.cancelDialog();
        this.$parent.getPageList();
      }, error => {
        this.btnLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 更新级段位
    edit() {
      this.btnLoading = true;
      this.qo_use.fee = Math.round((this.qo_use.fee * 100) * 1000) / 1000;
      api_PUT_ClubDuanId(this.id, this.qo_use).then(res => {
        this.$message({ type: 'success', message: '修改成功' });
        this.btnLoading = false;
        this.cancelDialog();
        this.$parent.getPageList();
      }, error => {
        this.btnLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    cancelDialog() {
      this.dialogVisible = false;
      this.qo = {
        name: '',
        fee: 0,
        isEnabled: true,
        levelDuanTypeCode: null,
        beltLevelTypeCode: null,
        beltDuanTypeCode: null
      };
      this.qo_use = {
        name: '',
        fee: 0,
        isEnabled: true,
        levelDuanTypeCode: null,
        beltLevelTypeCode: null,
        beltDuanTypeCode: null
      };
      this.id = '';
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
